<template>
  <div class="userList">
    <md-table
      v-model="searched"
      md-sort="name"
      md-sort-order="asc"
      md-fixed-header
    >
      <md-table-toolbar>
        <md-field md-clearable class="search md-toolbar-section-start">
          <md-input
            placeholder="输入用户名、姓名、角色查找..."
            v-model="selectedUser"
            @input="getUser"
          />
        </md-field>
      </md-table-toolbar>
      <!-- 表格空 -->
      <md-table-empty-state
        v-if="searched.length"
        md-label="No users found"
        :md-description="`No user found for this '${selectedUser}' query.`"
      >
      </md-table-empty-state>
      <!-- </div> -->
      <!-- 表格 -->
      <md-table-row slot="md-table-row" slot-scope="{ item }">
        <md-table-cell
          v-for="(user, key, index) in item"
          :key="`user-${index}`"
          :md-label="key"
          :md-sort-by="key === 'id' ? '' : key"
          :md-numeric="key === 'id'"
        >
          {{ user }}
        </md-table-cell>
      </md-table-row>
    </md-table>
    <md-dialog-confirm
      :md-active.sync="showJumpAlert"
      md-title="跳转提示"
      :md-content="`登录失效，${seconds}秒后将跳转到登录页`"
      md-cancel-text="取消"
      md-confirm-text="去登录"
      @md-cancel="cancelJumpToLogin"
      @md-confirm="jumpToLogin"
    />
  </div>
</template>
<script>
import API from '@/api/api_user.js'
import { mapState } from 'vuex'
import Tool from '@/utils/tools'
import { logTimeOut } from '@/mixin'
export default {
  data() {
    return {
      searched: [],
      selectedUser: '',
      users: [],
      page: 1,
      limit: 10,
      total: 0
    }
  },
  mixins: [logTimeOut],
  computed: {
    ...mapState(['sessionInvalid'])
  },
  methods: {
    getUser() {
      const _this = this
      const params = {
        page: this.page,
        limit: 10,
        name: this.selectedUser
      }
      API.findList(params).then(res => {
        if (_this.sessionInvalid) {
          _this.handleLoginTimeOut()
        } else {
          console.log(res.users)
          _this.users = Tool.handleUser(res.users)
          _this.searched = _this.users
        }
      })
    }
  },
  mounted() {
    this.getUser()
  },
  beforeRouteLeave(to, from, next) {
    this.cancelJumpToLogin()
    next()
  }
}
</script>

<style lang="less" scope>
.search {
  max-width: 500px;
  margin-bottom: 10px;
}
.md-empty-state {
  display: inline-block;
  vertical-align: middle;

  + .md-empty-state {
    margin-left: 16px;
  }
  .md-empty-state-description {
    color: #aaa;
  }
}
</style>
